<template>
    <Modal
            v-model="modal"
            :width="30"
            :title="title">
        <div v-if='modal'>
            <Form  :model="info" action="javascript:void(0)">
                <FormItem>
                    <div class="row">
                        <label slot='label' class="control-label text-right col-md-3">陪同人员</label>
                        <div class="col-md-9">
                            <Select
                                    v-model="info.worker_id"
                                    filterable
                                    remote
                                    placeholder="请输入关键词搜索陪同人员"
                                    :remote-method="workerWithList"
                                    :loading="search_loading">
                                <Option v-for="(option, index) in list" :value="option.id" :key="index" :label="option.name">
                                    <span>{{option.name}}</span><span style="float:right;color:#333">{{option.phone}}</span>
                                </Option>
                            </Select>
                            <p class="m-b-none">默认只显示前50名陪同人员</p>
                            <p class="m-b-none">关键词匹配只前50位陪同人员</p>
                        </div>
                    </div>
                </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="ghost" @click='cancel'>取消</Button>
            <btn-submit :p-click='ok'>确定</btn-submit>
        </div>
    </Modal>
</template>
<script>
    const setDataDef = {
        worker_id:''
    };
    import serCustomer from '../../serves/api-customer'
    import serWorkerWith from '../../serves/api-worker-with'
    export default{
        data () {
            return {
                search_loading:false,
                list:[],
                modal: false,
                info:{},
            }
        },
        computed:{
            title(){
                return '设置陪同人员陪同选中的参会入员'
            }
        },
        methods: {
            handleOpen(data){
                this.info = Object.assign({},setDataDef,data);
                this.$set(this,'modal',true);
                this.workerWithList('',true);
            },
            async workerWithList(query,init){
                if(query!== ''||init){
                    this.$set(this,'search_loading',true);
                    let res = await serWorkerWith.list({
                        page:'1',
                        size:'50',
                        name:query
                    });
                    if(res.code==1){
                        this.$set(this,'list',res.data);
                    }else {
                        this.list = [];
                    }
                    this.$set(this,'search_loading',false);
                }else {
                    this.list = [];
                }
            },
            async ok () {
                if(this.info.worker_id==''){
                    this.$Message.warning('请选择陪同人员')
                }
                const res = await serCustomer.setWith({
                    worker_id:this.info.worker_id,
                    ids:this.info.ids,
                });
                if(res.code==1){
                    this.$Message.success(res.message);
                    this.$set(this,'modal',false);
                    this.$emit('on-change',true);
                    return true;
                }else{
                    this.$Message.error(res.message);
                    return false;
                }
            },
            cancel () {
                this.$set(this,'modal',false);
                this.$emit('on-change',false);
            },
        },
        components:{
        }
    }
</script>